<template>
    <div id="app" class="page-search">
        <div class="search-box">
            <form class="input-box" action="#" onsubmit="return false">
                <i class="uicon uicon-search-dark search" @click="search(keyword,$event)"></i>
                <input type="search" v-model.trim="keyword" :placeholder="placeholder" @keypress.enter="search(keyword,$event)">
                <i class="uicon uicon-close" @click="clearKeyWord"></i>
            </form>
            <a href="javascript:history.back();">取消</a>
        </div>
        <!-- end search-box -->
        <div class="scroll-box" id="scroll-view" ref="scrollView">
            <div class="history-box" v-if="!is_empty">
                <a href="javascript:;" v-if="item.isShow" @click="searchItem(item)" class="hitem" v-for="(item, index) in history" :key="index">
                    <i class="uicon uicon-history"></i>
                    <span>{{ item.keyword }}</span>
                    <a href="javascript:;" @click.stop="remove(index)" class="close">&times;</a>
                </a>
                <a href="javascript:;"  class="all" @click="showAllOrClear" v-if="history.length > 2">
                    {{ isShowAll ? '全部搜索记录' : '清除历史记录' }}
                </a>
            </div>
            <div class="search-empty" v-if="is_empty">
                <div class="cont">
                    <p>抱歉，没有找到</p>
                    <p>“
                        <span>{{re_keyword}}</span>”相关内容</p>
                </div>
            </div>
            <!-- end search-empty -->
            <!-- 有搜索结果的情况 -->
            <div class="result-box" v-else>
                <scroll-list class="ui-list" v-show="list.length>0" :disabled="true" :config="scroll" @bottom="loadmore">
                    <ui-item v-for="item in list" :item="item" :key="item.id"
                        :params="player" 
                        @playVideo="playVideo"
                        @volumechange="volumeChange"
                    >
                        <span slot="title" v-html="item.title"></span>
                    </ui-item>
                </scroll-list><!-- en dui-list -->
            </div>
            <div class="hot-box" v-show="list.length<=0 || is_empty">
                <div class="hot-header">
                    <p>
                        <i class="uicon uicon-hot-list"></i>
                        <span>今日热点</span>
                    </p>
                    <a @click="go($config.pages.hot)">更多
                        <i class="uicon uicon-link"></i>
                    </a>
                </div>
                <div class="list">
                    <a :href="item.detail_url" class="item" v-for="item in hot" :key="item.id">{{item.title}}</a>
                </div>
            </div>
            <!-- end hot-box -->
        </div>
    </div>
</template>
<script>
import Items from "../components/items.vue";
import ScrollList from "../components/scrollList.vue";
import mxPlayer from '../mixins/inlinePlayer.js'
export default {
    name: "page-search",
    components: {
        [ScrollList.name]: ScrollList,
        [Items.name]: Items
    },
    mixins: [mxPlayer],
    data() {
        return {
            keyword: "",
            re_keyword:'',
            page: {
                page_no: 1,
                is_end: false,
            },
            scroll: {
                target:'#scroll-view',
                bottom: false
            },
            placeholder: "",
            history: [],
            list:[],
            is_empty:false,
            isShowAll: true,
            hot: [],
        };
    },

    mounted () {
        this.getInputTip();
        this.initHistoryFn();
        this.getHot();
    },

    methods: {
        loadmore(needClean = false) {
            if (this.scroll.bottom) return false;
            this.scroll.bottom = true;
            this.search(this.re_keyword,false,needClean)
        },
        go(url){
            location.href = url;
        },
        getInputTip(){
            this.$http.get('?ct=index&ac=search_notice&location=1').then(response=>{
                let data = response.data;
                if(data.code == 0){
                    this.placeholder = data.data.key_word;
                }else{
                    this.$toast(data.msg);
                }
            }).catch(e=>{
                window.$zEvent.$emit('ERROR',e);
            })
        },
        initHistoryFn () {
            let history = [];
            localStorage.getItem('search') ? history = JSON.parse(localStorage.getItem('search')) : [];
            history.forEach((item, index) => {
                index < 2 ? item.isShow = true : item.isShow = false;
            });
            this.history = history;
        },

        clearKeyWord () {
            this.keyword = '';
            // this.re_keyword = '';
            this.is_empty = false;
        },

        search (keyword,e,needClean = true) {
            if (!keyword) {
                if(this.placeholder){
                    keyword = this.placeholder;
                }else{
                    return false;
                }
            }
            this.re_keyword = keyword;
            let keywordHandle = '<span class="mark">' + keyword + "</span>";
            if(needClean){
                e && e.target && e.target.blur();
                this.page.page_no = 1;
                this.page.is_end = true
            }

            let params = {
                keyword,
                page_no :this.page.page_no
            }
            localStorage.getItem('search') ? this.history = JSON.parse(localStorage.getItem('search')) : '';

            if (this.history.length === 0) {
                this.history.unshift( {"keyword": keyword, isShow: true} );
            } else {
                let index;
                for(let i = 0,len = this.history.length;i<len;i++){
                    if (this.history[i].keyword === keyword) {
                        index = i;
                        break;
                    }
                }
                if(typeof index !== 'undefined'){
                    this.history.splice(index,1)
                }
               this.history.unshift( {"keyword": keyword, isShow: true});
            }
            localStorage.setItem('search', JSON.stringify(this.history));

            if(this.isShowAll){
                this.history.forEach((item, index) => {
                    index >=2 ? item.isShow = false : '';
                });
            }
            
            return this.$http.get("?ct=news&ac=search_list", {params}).then(response => {
                    let { data } = response;
                    if (data.code == 0) {
                        let rs = data.data;
                        this.page.is_end = !rs.is_have_data;
                        let list = [];
                        let lists = rs.list.length!=0 ?rs.list : rs.key_word_list;
                         lists &&
                            lists.forEach &&
                            lists.forEach(item => {
                                if (this.$utils.unlike.check(item.id)) return;
                                let tmpItem = item;
                                if (item.style_num == 6) {
                                    //热点新闻
                                    tmpItem.url = item.detail_url;
                                    tmpItem.type = "hot-list";
                                    let childList = [];
                                    toString.call(item.list) ==
                                        "[object Array]" &&
                                        item.list.forEach(child => {
                                            if(this.$utils.unlike.check(child.id)) return;
                                            let citem = child;
                                            if(citem.highlight_title){
                                                citem.title = citem.highlight_title
                                            }else{
                                                citem.title = citem.title.replace(keyword,keywordHandle);
                                            }
                                            citem.type = child.type == 3 ? "专题" : "";
                                            citem.url = child.detail_url;
                                            citem.source = child.source;
                                            citem.view = child.browse_total;
                                            citem.time = this.$moment(child.issue_time * 1000).fromNow().replace(" ", "");
                                            citem.src = child.cover_img[0];
                                            childList.push(citem);
                                        });
                                    tmpItem.list = childList;
                                } else {
                                    tmpItem = item;
                                    tmpItem.title = item.title.replace(keyword,keywordHandle);
                                    tmpItem.url = item.detail_url;
                                    tmpItem.type = (() => {
                                        switch (item.style_num) {
                                            case 1:
                                                return "special";
                                            case 2:
                                                return "normal";
                                            case 3:
                                                return "grid";
                                            case 4:
                                                return "video";
                                            case 5:
                                                return "single";
                                        }
                                    })();
                                    if (tmpItem.type !== "grid") {
                                        tmpItem.src = item.cover_img[0];
                                    } else {
                                        tmpItem.src = item.cover_img;
                                    }

                                    if(tmpItem.type == 'video'){
                                        tmpItem.play_status = 0;
                                    }

                                    if(tmpItem.highlight_title){
                                        tmpItem.title = tmpItem.highlight_title
                                    }else{
                                        tmpItem.title = tmpItem.title;
                                    }

                                    tmpItem.view = item.browse_total;
                                    tmpItem.time = this.$moment(
                                        item.issue_time * 1000
                                    )
                                        .fromNow()
                                        .replace(" ", "");
                                }
                                list.push(tmpItem);
                            });

                        if (!needClean) {
                            let savelist = [];
                            list.forEach(item=>{
                                item.is_top = 0;
                                item.is_hot = 0;
                                savelist.push(item); 
                            })
                            this.list = this.list.concat(savelist);
                        } else {
                            this.$refs.scrollView.scrollTop = 0;
                            list.forEach(item=>{
                                item.is_top = 0;
                                item.is_hot = 0;
                            })
                            this.list = list;
                        }
                        this.page.page_no++;
                        this.$nextTick(() => {
                            this.is_empty = this.page.is_end && this.list.length === 0;
                            this.scroll.bottom = this.page.is_end ? 'done' : false;
                        });
                    }else{
                        this.$toast(data.msg);
                    }
                });

            
        },

        searchItem (item) {
            this.keyword = item.keyword;
            this.page.is_end = true;
            this.search(this.keyword,false,true)
        },

        remove (index) {
            this.history.splice(index, 1);
            if (this.isShowAll) {
                this.history.forEach((item, index) => {
                    index < 2 ? item.isShow = true : item.isShow = false;
                });
            }
            // this.history.length === 0 ? this.isShowAll = true : '';
            localStorage.setItem('search', JSON.stringify(this.history));
            // this.initHistoryFn();
        },

        showAllOrClear () {
            if (this.isShowAll) {
                this.history.forEach(item => {
                    item.isShow = true;
                });
                this.isShowAll = false;
            } else {
                this.history = [];
                this.isShowAll = true;
                localStorage.setItem('search', JSON.stringify(this.history));
            }
        },

        getHot () {
            this.$http.get("?ct=news&ac=today_hot").then(res => {
                this.hot = res.data.data;
            })
        },
    } // methods end
};
</script>
<style lang="less">

.page-search {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    background-color: #f6f6f6;

    .search-box {
        display: flex;
        align-items: center;
        padding-top: 14px;
        padding-bottom: 14px;
        height: 60px;
        box-sizing: content-box;
        .input-box {
            display: flex;
            flex: 1;
            align-items: center;
            height: 100%;
            padding: 14px 30px 14px 20px;
            background-color: #f6f6f6;
            border-radius: 30px;

            .search {
                margin-right: 12px;
            }

            input {
                background-color: transparent;
                border: none;
                outline: none;
                flex: 1;
                color: #282828;
                font-size: 28px;
                line-height: normal;
                -webkit-appearance:none;
                caret-color: #e64a19;
                &::-webkit-input-placeholder {
                    color: #c6c6c6;
                }
                &::-webkit-search-cancel-button{
                    display: none;
                }
            }
        }

        a {
            padding-left: 30px;
            font-size: 30px;
            color: #e64a19;
        }
    }
    .scroll-box {
        flex: 1;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .history-box,
    .search-box,
    .list-box {
        background-color: #fff;
        padding-left: 30px;
        padding-right: 30px;
    }

    .history-box {
        .hitem,
        .all {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .close {
            color: #dcdcdc;
            padding: 0 20px;
        }
        .hitem {
            font-size: 32px;
            height: 80px;
            color: #282828;
            box-sizing: content-box;
            span {
                margin-left: 20px;
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            & + .hitem {
                border-top: 1px solid #eeeeee;
            }
        }
        .all {
            border-top: 1px solid #eeeeee;
            font-size: 30px;
            height: 90px;
            color: #919191;
        }
    }
    .result-box,
    .hot-box {
        margin-top: 10px;
    }
    .hot-box {
        padding: 20px 30px 0;
        background-color: #fff;
    }

    .hot-header {
        padding: 10px 0;
        font-size: 30px;
        &,
        p,
        a {
            display: flex;
            align-items: center;
        }
        p {
            flex: 1;
            font-weight: bold;
            color: #282828;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            i {
                margin-right: 12px;
            }
        }

        a {
            margin-left: 12px;
            color: #5a4640;

            i {
                margin-left: 10px;
            }
        }
    }

    .list {
        a {
            display: block;
            line-height: 90px;
            height: 90px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 32px;
            color: #282828;

            & + a {
                border-top: 1px solid #eee;
            }
        }
    }

    .search-empty {
        padding-bottom: 66px;
        height: 495px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        background-color: #fff;
        background-size: 690px 248px;
        background-repeat: no-repeat;
        background-image: url(../assets/search-empty.jpg);
        background-position: center 80px;

        p {
            text-align: center;
            font-size: 32px;
            color: #282828;
            line-height: 42px;

            span {
                color: #e64a19;
            }
        }
    }

    .result-box {
        .result-item {
            padding: 0 24px;
            background: #fff;
        }
        .classify {
            padding: 30px 0 20px;
            font-size: 36px;
            line-height: 1;
            font-weight: bold;
            color: #282828;
        }
        .news-box {
            display: flex;
            justify-content: space-between;
            padding: 24px 0;
            border-bottom: 1px solid #e3e3e3;
        }
        .news-box > div:first-child {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .news-title {
            display: -webkit-box;
            line-height: 1.4;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            font-size: 34px;
            color: #282828;
        }
        .mark {
            color: #e64a19;
        }
        .news-bottom {
            margin-bottom: 3px;
            font-size: 22px;
            color: #919191;
            span {
                margin-right: 15px;
            }
            .news-source {
                color: #a98273;
            }
        }
        .news-box > div:last-child {
            position: relative;
            .news-img {
                display: inline-block;
                width: 235px;
                height: 165px;
                margin-left: 32px;
                border-radius: 10px;
            }
            .icon-play-btn {
                display: inline-block;
                width: 70px;
                height: 70px;
                background-image: url(../assets/icon-play-btn.png);
                background-size: 100% 100%;
                position: absolute;
                top: 25%;
                left: 45%;
                z-index: 999;
            }
        }
        .view-more {
            display: inline-block;
            width: 100%;
            text-align: center;
            font-size: 30px;
            color: #5a4640;
            padding-top:10px;
            padding-bottom:30px;
            i {
                position: relative;
                top: 2px;
                display: inline-block;
                width: 26px;
                height: 26px;
                background-image: url(../assets/icon-view-more.png);
                background-size: 100% 100%;
            }
        }

        ul {
            li:last-child a{
                border: 0;
            }
        }
    }
    .tit em{
        font-style: normal;
        color: red;
    }
}
</style>


